<template>
  <div class="box">
    <div class="tools">
      <el-button size="mini" @click="createWindow(0)">新建一个{{buttons[routeType].name}}后台</el-button>
      <!--      <el-button size="mini" @click="getMyUUID(0)">读取我的uuid</el-button>-->
      <!--        <el-button size="mini" @click="getList">读取窗口列表</el-button>-->
    </div>
    <div class="table">
      <el-table
          :data="list"
          class="list"
          :fit="true"
          :stripe="true"
          :highlight-current-row="true"
          height="380"
          border
      >
        <el-table-column
            prop="windowName"
            label="后台名称"
            align="center">
        </el-table-column>
        <el-table-column
            width="160"
            label="创建时间"
            align="center">
          <template v-slot="{row}">
            <div>
              {{ formatDate(new Date(row.createTime)) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="250">
          <template v-slot="{row}">
            <div class="buttons">
              <el-button size="mini" @click.stop="open(row)">打开</el-button>
              <el-button size="mini" @click.stop="showUpdateFun(row.windowName,row.id)">修改名称</el-button>
              <el-button size="mini" @click.stop="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="输入新的名称"
        :visible.sync="showUpdateName"
        :modal="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="30%"
    >
      <el-input v-model="updateBean.name"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateName = false">取 消</el-button>
        <el-button type="primary" @click="updateName">确 定</el-button>
      </div>
    </el-dialog>
    <div class="bottom">
      <el-carousel v-if="!showOf.showTools" class="guanggaowei" indicator-position="outside">
        <el-carousel-item v-for="item in 3" :key="item">
          <el-image @click="toUrl((mainObj['guanggaowei'+item]+'').split(',')[1])"
                    :src="(mainObj['guanggaowei'+item]+'').split(',')[0]">
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import {ipcApiRoute} from '@/api/main';
import {addWindow, delWindow, getImages, getWindowList, updateWindow} from "@/api/home";

export default {
  name: "listManger",
  props:{
    routeType:{
      default:0,
      type: Number
    }

  },
  data() {
    return {
      buttons:[
        {
          name:"美团",
          code:"mt"
        },
        {
          name:"饿了么",
          code:"el"
        },
        {
          name:"京东",
          code:"jd"
        },
      ],
      views: [
        {
          type: 'web',
          state: "mt",
          content: 'https://waimaie.meituan.com',
          windowName: 'window-web',
          windowTitle: 'meituan',
          rowId: "-1"
        },
        {
          type: 'web',
          state:"el",
          content: 'https://nr.ele.me/eleme-nr-bfe-newretail/eb_login',
          windowName: 'window-web',
          windowTitle: 'element',
          rowId: "-1"
        },
        {
          type: 'web',
          state:"jd",
          content: 'https://store.jddj.com',
          windowName: 'window-web',
          windowTitle: 'jd',
          rowId: "-1"
        },
      ],
      showOf: {
        showTools: false,
      },
      list: [],
      showUpdateName: false,
      updateBean: {
        name: "",
        id: ""
      },
      mainObj: {
        guanggaowei1: "",
        guanggaowei2: "",
        guanggaowei3: "",
      },
      imgs: [],
      myUUID: ""
    };
  },
  created() {
    console.log(this.$route.query)
    this.init()
    this.initLogo()
  },
  methods: {
    init() {
      this.getMyUUID().then(then => {
        this.getList()
      })
    },
    createWindow() {
      //创建一条记录
      addWindow({
        windowName: "新窗口",
        windowCookie: "",
        deviceId: this.myUUID,
        createTime: this.formatDate(new Date()),
        windowGroup: this.buttons[this.routeType].code
      }).then(then => {
        this.$message({
          showClose: true,
          message: then.message,
          type: 'success'
        })
        this.openNewWindow()
      })
    },
    getMyUUID() {
      return new Promise((r, e) => {
        this.$ipc.invoke(ipcApiRoute.getMyUUID).then(UUID => {
          this.myUUID = UUID
          r();
        })
      });
    },
    formatDate(date) {
      const pad = (num) => num.toString().padStart(2, '0');

      const year = date.getFullYear();
      const month = pad(date.getMonth() + 1); // 月份从 0 开始，所以需要加 1
      const day = pad(date.getDate());
      const hours = pad(date.getHours());
      const minutes = pad(date.getMinutes());
      const seconds = pad(date.getSeconds());

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    initLogo() {
      let obj = this.$route.query
      if (obj.agency !== null && obj.agency !== undefined) {
        localStorage.setItem("agencyCode", obj.agency)
      }
      getImages({key: localStorage.getItem("agencyCode")}).then(then => {
        this.imgs.push(...then.data)
        this.mainObj.guanggaowei1 = this.imgs.filter(item => item.name === "guanggaowei1")[0].url
        this.mainObj.guanggaowei2 = this.imgs.filter(item => item.name === "guanggaowei2")[0].url
        this.mainObj.guanggaowei3 = this.imgs.filter(item => item.name === "guanggaowei3")[0].url
      })
    },
    deleteItem() {

    },
    toUrl(url) {
      let data = {
        type: 'web',
        content: url,
        windowName: 'window-web',
        windowTitle: '广告详情',
        noAdd: true
      }
      this.$ipc.invoke(ipcApiRoute.createWindow, data).then(r => {
        this.getList()
      })
    },
    showUpdateFun(name, id) {
      this.showUpdateName = true
      this.updateBean.name = name
      this.updateBean.id = id
    },
    getList() {
      getWindowList({
        uuid: this.myUUID,
        type: this.buttons[this.routeType].code
      }).then(then => {
        this.list = then.data
      })
    },
    openNewWindow() {
      getWindowList({
        uuid: this.myUUID,
        type: this.buttons[this.routeType].code
      }).then(then => {
        this.list = then.data
        let newData = this.list[this.list.length - 1]
        this.open(newData)
      })
    },
    open(row) {
      let data = this.views[this.routeType]
      data.cookie = row.windowCookie
      data.windowName = row.windowName
      data.rowId = row.id
      this.$ipc.invoke(ipcApiRoute.openWindow, data).then(data => {
      })
    },
    del(id) {
      delWindow({id}).then(then => {
        this.getList();
      })
    },
    updateName() {
      /*      this.$ipc.invoke(ipcApiRoute.updateName, this.updateBean).then(data => {
              this.showUpdateName = false
              this.getList()
            })*/
      let data = {}
      data.windowName = this.updateBean.name
      data.deviceId = this.myUUID
      data.id = this.updateBean.id
      updateWindow(data).then(then => {
        /*        this.$message({
                  showClose: true,
                  message: then.message,
                  type: 'success'
                })*/
        this.getList()
        this.showUpdateName = false
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 15px;
}

.table {
  width: 100%;
  margin-top: 10px;
}

.buttons {
  display: flex;
}

.guanggaowei {
  width: 300px;
  height: 100px;
  overflow-y: hidden;
}

.bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: hidden;
  padding-top: 20px;
}
</style>
